function init_sidemenu(panel_parent_id, menu_data) {
    $('#sm').sidemenu({
        data: menu_data,
        onSelect: function (item) {
            sidemenu_change(panel_parent_id, item, menu_data)
        }
    });
    let init_menu_item = menu_data[0].children[0]
    sidemenu_change(panel_parent_id, init_menu_item, menu_data)
}

function sidemenu_change(panel_parent_id, item, menu_data) {
    $(".easyui-panel").hide()
    let menu_text = item.text
    top:
        for (let first_menu of menu_data) {
            for (let second_menu of first_menu.children)
                if (second_menu.text === menu_text) {
                    init_panel(panel_parent_id, second_menu)
                    $("#" + second_menu.panel_id).show();
                    break top;
                }
        }
}

function init_panel(panel_parent_id, menu_item) {
    let panel_item = $("#" + panel_parent_id).find("#" + menu_item.panel_id)
    if (panel_item.length > 0) {
        return
    }
    let ops_str = "<div id=\"" + menu_item.panel_id + "\" class=\"easyui-panel\" style=\"width: 100%;height: 100%\"\n" +
        "         data-options=\"closable:true, collapsible:true,minimizable:true,maximizable:true\">\n" +
        "    </div>"
    $("#" + panel_parent_id).append(ops_str)
    init_panel_components(menu_item)
}

function init_panel_components(menu_item) {
    let panel_id = menu_item.panel_id
    if (menu_item.hasOwnProperty("searchbox")) {
        let searchbox = menu_item.searchbox
        let ss_str = "<input id=\"" + searchbox.id + "\" style=\"width:300px\">"
        let mm_str = "<div id=\"" + searchbox.menu_id + "\" style=\"width:120px\"></div>"
        $("#" + panel_id).append(ss_str).append(mm_str)
        init_searchbox(searchbox.id, searchbox.menu_id, searchbox.table_id, searchbox.select_data)
    }
    if (menu_item.hasOwnProperty("datagrid")) {
        let datagrid = menu_item.datagrid
        let datagrid_str = "<table id=\"" + datagrid.id + "\"></table>"
        $("#" + panel_id).append(datagrid_str)
        init_datagrid(datagrid.id, menu_item.text, datagrid.url, datagrid.columns, datagrid.toolbar, datagrid.footer)
    }
}

function init_datagrid(datagrid_id, title, url, columns, toolbar = null, footer = null) {
    let datagrid_data = {
        url: url,
        method: 'get',
        title: title,
        width: "100%",
        height: "100%",
        fitColumns: true,
        singleSelect: true,
        pagination: true,
        columns: columns,
    }
    if (toolbar) {
        datagrid_data.toolbar = toolbar;
    }
    if (footer) {
        datagrid_data.footer = toolbar;
    }
    $('#' + datagrid_id).datagrid(datagrid_data);
}


function init_searchbox(searchbox_id, menu_id, dg_id, select_data) {
    let search_select_menu = $('#' + menu_id)
    if (!search_select_menu.children().length > 0) {
        for (let search_select_item of select_data) {
            let name = search_select_item.name
            let value = search_select_item.value
            search_select_menu.append('<div data-options="name:\'' + name + '\'">' + value + '</div>');
        }
    }

    $('#' + searchbox_id).searchbox({
        searcher: function (value, name) {
            let searcher_obj = {};
            searcher_obj[name] = value;
            $('#' + dg_id).datagrid('load', searcher_obj);
        },
        menu: '#' + menu_id,
        prompt: 'Please Input Value'
    });
    // 实现搜索框失去焦点就直接查询
    let search_input = $('#' + searchbox_id).next().find("input[type=\"text\"]");
    search_input.change(function () {
        let name = $('#' + searchbox_id).next().find(".textbox-value").attr("name");
        let value = $('#' + searchbox_id).next().find("input[type=\"text\"]").val();
        let searcher_obj = {};
        searcher_obj[name] = value
        $('#' + dg_id).datagrid('load', searcher_obj);
    })
}